<template>
	<view class="container">
		<!-- 报修人员 -->
		<view class="section">
			<view class="section-header">报修人员</view>
			<view class="form-group">
				<view class="form-item">
					<text class="label">姓名</text>
					<input class="input" type="text" placeholder="请输入姓名" disabled="true" v-model="userInfo.realname" />
				</view>
				<view class="form-item">
					<text class="label">学号</text>
					<input class="input" type="text" placeholder="请输入学号" disabled="true" v-model="userInfo.stunum" />
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<input class="input" type="text" placeholder="请输入手机号" disabled="true" v-model="userInfo.phone" />
				</view>
			</view>
		</view>

		<!-- 维修信息 -->
		<view class="section">
			<view class="section-header">维修信息</view>
			<view class="form-group">
				<view class="form-item">
					<text class="label">电脑类型</text>
					<radio-group @change="onComputerTypeChange">
						<label class="radio-item">
							<radio value="2" :checked="FormData.rPcType === '2'" />
							台式
						</label>
						<label class="radio-item">
							<radio value="1" :checked="FormData.rPcType === '1'" />
							笔记本
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">电脑型号</text>
					<input class="input" type="text" placeholder="请输入电脑型号" v-model="FormData.rPcName" />
				</view>
				<view class="form-item">
					<text class="label">问题描述</text>
					<input class="input" type="text" placeholder="请输入电脑问题" v-model="FormData.rReason" />
				</view>
				<view class="form-item">
					<text class="label">图片</text>
					<uni-file-picker limit="5" title="维修图片" file-mediatype="image" :list-style="false" mode="grid"
						:value="fileList" @select="select" @fail="fail" @delete="delete_img" />
				</view>
			</view>
		</view>

		<!-- 预约信息 -->
		<view class="section">
			<view class="section-header">预约信息</view>
			<view class="form-group">
				<view class="form-item">
					<text class="label">预约时间</text>
					<uni-datetime-picker type="date" :clear-icon="false" v-model="FormData.data"></uni-datetime-picker>
				</view>
				<view class="form-item">
					<text class="label">宿舍号</text>
					<input class="input" type="text" placeholder="请输入宿舍号" disabled="true" v-model="userInfo.dormmun" />
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-button" @click="submitForm">提交维修单</view>
	</view>
</template>

<script>
	import API from '../../api/api';
	import '../../common/css/repair.scss'
	export default {
		data() {
			return {
				FormData: {
					rPcName: '',
					rReason: '',
					rPcType: '2',
					data: ''
				},
				fileList: [],
				userInfo: {
					realname: '',
					dormmun: '',
					phone: '',
					stunum: ''
				}
			}
		},
		methods: {
			onComputerTypeChange(e) {
				this.FormData.rPcType = e.detail.value;
			},
			async submitForm() {
				if (!this.FormData.rPcType) {
					uni.showToast({
						title: "请选择电脑类型",
						icon: "none",
					});
					return;
				}
				if (!this.FormData.rPcName) {
					uni.showToast({
						title: "电脑型号不能为空",
						icon: "none",
					});
					return;
				}
				if (!this.FormData.rReason) {
					uni.showToast({
						title: "问题描述不能为空",
						icon: "none",
					});
					return;
				}
				if (!this.FormData.data) {
					uni.showToast({
						title: "预约时间不能为空",
						icon: "none",
					});
					return;
				}
				if (!this.fileList) {
					uni.showToast({
						title: '维修图片不能为空',
						icon: 'none'
					})
					return;
				}
				let token = uni.getStorageSync("token")
				let r_pc_type = this.FormData.rPcType
				let r_pc_name = this.FormData.rPcName
				let r_reason = this.FormData.rReason
				let r_img_list = this.fileList
				let r_reserve_time = this.FormData.data

				let res = await API.CreateRepairInfo(token, r_pc_type, r_pc_name, r_reason, r_img_list, r_reserve_time)
				console.log(res)
				if (res.code === 1) {
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000
					})
					this.FormData = {
						rPcType: '',
						rPcName: '',
						rReason: '',
						data: ''
					};
					this.fileList = [];
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 500)
				} else {
					uni.showToast({
						title: '请填写完整的表单',
						icon: 'none'
					})
				}
			},
			async select(e) {
				const token = uni.getStorageSync("token")
				const tempFilePaths = e.tempFilePaths;

				// console.log(tempFilePaths);

				if (!tempFilePaths || tempFilePaths.length === 0) {
					uni.showToast({
						title: "未选择文件",
						icon: 'none'
					});
					return;
				}

				try {
					const uploadRes = await uni.uploadFile({
						url: 'http://127.0.0.1:8848/repair_img/upload',
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							token: token
						}
					})
					console.log(uploadRes)
					const resData = JSON.parse(uploadRes.data);
					if (resData.code === 1) {
						this.fileList.push({
							url: resData.data
						})
						// console.log(this.fileList)
						uni.showToast({
							title: "上传成功",
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: "上传失败",
							icon: 'none'
						})
					}
				} catch (error) {
					uni.showToast({
						title: "上传失败,请稍后重试",
						icon: 'none'
					})
				}
			},
			fail(e) {
				console.log('文件上传失败:', e);
				uni.showToast({
					title: "上传失败,请稍后重试",
					icon: 'none'
				})
			},
			async delete_img(e) {
				const index = e.index;
				const imageUrl = this.fileList[index].url
				if (!imageUrl) {
					uni.showToast({
						title: "图片 URL 无效",
						icon: "none",
					});
					return;
				}
				try {
					const deleteImg = await API.deleteImg(imageUrl)
					if (deleteImg.code === 1) {
						uni.showToast({
							title: '图片删除成功',
							icon: 'success'
						})
						this.fileList.splice(index, 1)
					} else {
						uni.showToast({
							title: "图片删除失败，请重试",
							icon: "none",
						});
					}
				} catch (error) {
					uni.showToast({
						title: "删除失败，请稍后重试",
						icon: "none",
					});
				}
			},
			async getUserInfo() {
				const token = uni.getStorageSync("token")
				let res = await API.getUserInfo(token)
				console.log(res)
				if (res.code === 1) {
					const {
						realname,
						stunum,
						dormmun,
						phone
					} = res.data
					if (!realname || !stunum || !dormmun || !phone) {
						uni.showToast({
							title: "该用户未填写个人信息",
							icon: "none",
						});
					} else {
						this.userInfo = res.data
					}
				} else {
					uni.showToast({
						title: "该用户未填写个人信息",
						icon: "none",
					});
				}
			},
		},
		created() {
			this.getUserInfo()
		}
	}
</script>

<style>

</style>